<template>
	<view class="wrap">
		<view class="inner">
			<view class="searchBox">
				<view class="left">
					<image class="icon" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/7.png" mode="">
					</image>
				</view>
				<view class="right">
					<u-notice-bar font-size="24" bg-color="#DFECFF" color="#1B6BE3" :volume-icon="false" mode="vertical"
						:is-circular="false" :list="noticeTitleList">
					</u-notice-bar>
				</view>
			</view>
		</view>
		<view class="mapWrap">
			<view class="maps">
				<mapPlat @regionchange="regionchange" @navigation="navigation" @markertaptap="markertaptap"
					@tapMap="tapMap" :markers="markers" :latitude="latitude" :longitude="longitude"
					:showOper="showOper" />
			</view>
		</view>
		<u-tabbar @change="change" height="150rpx" mid-button-size="90rpx" bg-color="#FFFFFF" v-model="current"
			:list="list" :mid-button="true"></u-tabbar>
			
			<!-- #ifdef MP-WEIXIN -->
			<!-- 小程序隐私协议 -->
			<!-- <privacy-popup ref="PrivacyPopck"></privacy-popup> -->
			<!-- #endif -->
	</view>
</template>

<script>
	import mapPlat from '@/components/menghn-map/menghn-map'
	import {mapState} from 'vuex'
	// 小程序隐私协议
	// import PrivacyPopup from "@/components/xw-privacy-popup/privacy-popup.vue"
	

	export default {
		components: {
			mapPlat,
			// PrivacyPopup
		},

		data() {
			return {

				customCalloutMarkerIds: [27595, 27594], // 地图markers ID列表
				latitude: 29.655836,
				longitude: 91.167297,
				
				// 29.655836,91.167297
				scrollTimer: null,
				showOper: false,
				markers: [
					// {
					// 	distance: 0.05828283926096898,
					// 	id: 27595,
					// 	latitude: 22.568887404083515,
					// 	longitude: 113.88770606927332,
					// 	title: '玄妙的33',
					// 	distance: '500km',
					// 	iconPath: 'https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/1.png',
					// 	width: 35,
					// 	height: 35,
					// 	img: "https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/11.png",
					// 	customCallout: {
					// 		anchorY: 8,
					// 		anchorX: 5,
					// 		display: 'ALWAYS', // BYCLICK 点击显示气泡  ALWAYS常显示
					// 	}
					// },
					// {
					// 	distance: 0.05828283926096898,
					// 	id: 27594,
					// 	distance: '540km',
					// 	latitude: 22.568382855230592,
					// 	longitude: 113.8894362439249,
					// 	title: '玄妙的',
					// 	iconPath: 'https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/4.png',
					// 	img: "https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/10.png",
					// 	width: 35,
					// 	height: 35,
					// 	customCallout: {
					// 		anchorY: 8,
					// 		anchorX: 5,
					// 		display: 'ALWAYS', // BYCLICK 点击显示气泡  ALWAYS常显示
					// 	}
						
					// }
				],

				noticeTitleList: [
					// '益生氧上线啦~ 首次使用免费半小时',
					// '益生氧上线啦~ 首次使用免费半小时',
					// '益生氧上线啦~ 首次使用免费半小时',
					// '益生氧上线啦~ 首次使用免费半小时'
				],

				list: [{
						iconPath: "https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/6.png",
						selectedIconPath: "https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/6.png",
						text: '附近氧站',
						customIcon: false,
					},
					{
						// iconPath: "https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/3.png",
						// selectedIconPath: "https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/3.png",
						text: '',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/4.png",
						selectedIconPath: "https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/4.png",
						text: '个人中心',
						customIcon: false,
					}
				],
				current: 0
			}
		},

		onLoad() {
			
			// this.$refs.PrivacyPopck.checkPrivacySetting();
			
			this.$u.api.config({
				paramCode: "notice"
			}).then(res => {
				if (res.code == 0) {
					this.noticeTitleList = res.config.split(',')
				}
			})
			
			
			this.markers=[]
			
		
			
			// this.getAddress()
			if(this.vuex_Long){
				this.longitude = this.vuex_Long
				this.latitude = this.vuex_Lat
				this.getDate()
			}else{
				this.getAddress()
			}
		},
		
		// onShow() {
			
		// },

		methods: {
			
			formatDistance(distance) {
			  if (distance < 1000) {
			    return distance.toFixed(0) + 'm';
			  } else {
			    return (distance / 1000).toFixed(2) + 'km';
			  }
			},
			getDate(){
				this.$u.api.nearbyDevice({
						longitude: this.longitude,
						latitude: this.latitude,
						page: 1,
						limit: 100,
						key:'',
					})
					.then((res) => {
						
						console.log(res,55555555555);
						this.customCalloutMarkerIds =  res?.data?.list?.map(r=>r.id);
						this.markers = res?.data?.list?.map(r=>{
							return{
								use_state:r.use_state,
								online_state:r.online_state,
								can_buy_count:r.can_buy_count*1,
								empty_count:r.empty_count*1,
								id: r.id,
								latitude: r.latitude*1,
								longitude: r.longitude*1,
								title: r.device_name,
								distance: r.juli,
								
								// this.formatDistance(r.juli),
								 // parseInt(r.juli/1000)+'km',
								iconPath: 'https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/1.png',
								width: 35,
								height: 35,
								img: r.icon_url,
								addr:r.address,
								time:r.business_hours,
								customCallout: {
									anchorY: 8,
									anchorX: 5,
									display: 'ALWAYS', // BYCLICK 点击显示气泡  ALWAYS常显示
								}
							}
						})
						
					});
			},
			
			
			
			getAddress() {
				try{
					let that = this
					uni.getLocation({
						type: 'wgs84',
						success: function (res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							that.longitude = res.longitude
							that.latitude = res.latitude
							that.$u.vuex('vuex_Long', res.longitude);
							that.$u.vuex('vuex_Lat', res.latitude);
							that.getDate()
						},
						fail: function (res) {
							this.longitude =that.$u.vuex('vuex_Long')
							this.latitude = that.$u.vuex('vuex_Lat')
							that.getDate()
							console.log('xxxxxx：' + res);
						},
					});
					
				}catch(e){
					this.longitude =34.236057
					this.latitude = 108.956218
					that.getDate()
				}
				
				
			},

			go() {
				console.error(3333333)
				uni.reLaunch({
					url: "/pages/sys/near/index"
				})
			},
			regionchange(e) { //移动地图触发
				if (this.scrollTimer != null) { //节流
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					if (e.type == 'end' && e.causedBy == 'drag') {
						console.log('地图移动了');
					}
				}, 500)
			},
			navigation(e) {
				console.log('navigation');
			},
			markertaptap(e) {
				console.log('markertaptap', e);
				this.showOper = true;
			},
			tapMap(e) { //点击地图触发
				this.showOper = false; //在小程序上需要这样做
				// 切记注释掉上线的时候
				// this.showOper = true;
				console.log('tapMap');
			},
			change(i) {
				this.current = i
				console.log(i, 5555555)

				if (i == 0) {

					uni.reLaunch({
						url: "/pages/sys/near/index"
					})

				} else if (i == 2) {
					uni.reLaunch({
						url: "/pages/sys/main/my"
					})
				}else{
					
					if(!this.vuex_token){
						uni.navigateTo({
							url:"/pages/sys/main/login"
						})
						
						return
					}
					let that = this
					
				
					
					uni.scanCode({
						onlyFromCamera: true,
						success: function (res) {
							
							if(res.path){
								let id = res.path?.split('?')?.[1]?.split('=')[1]
								uni.reLaunch({
									url:"/pages/sys/scar/index?deviceId="+id
								})
								
							}else{
								uni.showToast({
									title: '请扫描正确的二维码',
									icon: 'none'
								});
								

							}
							console.log(res.path,res.path?.split('?')?.[1]?.split('=')[1],4444);
						
							
							
						}
					});
				}
				// const name = ['YouMagic', '柔美吉正品验真', '扫码记录']
				// uni.setNavigationBarTitle({
				// 	title: name[i]
				// })
			}

		}

	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: 100vh;
		background: url("https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/2.png") no-repeat;
		background-size: cover;
		overflow-y: hidden;

	}

	.tabbar {
		height: 75px;

	}

	.mapWrap {
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		margin-top: 24rpx;
		width: 750rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -13rpx 32rpx 0rpx rgba(124, 137, 255, 0.47);
		padding: 3px;

		.maps {
			position: relative;
			height: calc(100vh - 310px);
			// height: calc(100vh - 194px);
			border-radius: 30rpx 30rpx 0 0 !important;
		}
	}

	.inner {
		padding: 320rpx 33rpx 0;

		.searchBox {
			height: 73rpx;
			background: #DFECFF;
			opacity: 1;
			display: flex;
			align-items: center;
			border-radius: 58rpx;

			.left {

				// align-items: center;
				.icon {

					width: 63rpx;
					height: 80rpx;
					margin: -18rpx 0 0 25rpx;
				}

			}

			.right {
				width: 570rpx !important;
				// flex: 1;
				font-size: 24rpx;
				font-family: PingFang SC-Light, PingFang SC;
				font-weight: 300;
				color: #666666;
				overflow: hidden;

				/deep/ .u-notice-box {
					margin-left: 0 !important;
				}

				/deep/ .u-notice-bar {
					padding: 9px 12px 9px 6px !important;
				}

			}


		}

	}
</style>

<style scoped lang="scss">
	/deep/ .u-tabbar__content__circle__border {
		background: none !important;
		width: 132rpx !important;
		height: 0 !important;
	}

	/deep/ .u-tabbar__content__item__button {
		top: 36rpx !important;

		/deep/ .u-icon__img {
			width: 50rpx !important;
			height: 50rpx !important;
		}
	}

	/deep/ .u-tabbar__content__item__text {
		bottom: 18px !important;
		font-size: 24rpx !important;
		font-family: PingFang HK-Medium, PingFang HK !important;
		font-weight: 500 !important;
		color: #323232 !important;
	}

	/deep/ .u-tabbar__content__circle__button {
		top: 31rpx !important;
		width: 334rpx !important;
		height: 104rpx !important;
		background: url("https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/3.png") no-repeat !important;
		background-size: cover !important;
		border-radius: 0 !important;
	}

	/deep/ .u-border-top:after {
		border-top-width: 0 !important;
	}

	/deep/ .u-border-bottom:after,
	/deep/ .u-border-left:after,
	/deep/ .u-border-right:after,
	/deep/ .u-border-top-bottom:after,
	/deep/ .u-border-top:after,
	/deep/ .u-border:after {
		border: none !important;
	}
</style>
